﻿@{
    Response.CacheControl = "no-cache";
    Response.AddHeader("Pragma", "no-cache");
    Response.Expires = -1;

    ViewBag.Title = "Справочник складов";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style>
    .form-horizontal .controls {
      /*original: margin-left: 160px;*/
      margin-left: 120px;
    }
</style>

<header class="jumbotron subhead" id="overview">
    <h1></h1>
    <p class="lead">Справочник складов</p>
</header>

<div class="page">

    <div class="block" id="start-page">
        <div class="form-actions">
            <a href="javascript:void(0);" class="btn" data-action="refreshLocationTable">
                <i class="icon-refresh"></i> Обновить</a>
            <a href="javascript:void(0);" class="btn" data-action="toggleSearchBlock">
                Настройки поиска</a>
        </div>

    <div class="hide" id="LocationSearchBlock">
        <form name="LOCATION-FILTER" class="form-horizontal well" method="post">

            <div class="control-group"> 
                <label class="control-label" for="EXT_KEY">Код Станции</label>
                <div class="controls row-fluid">
                    <input type="text" class="input-large" name="EXT_KEY" value="" placeholder="">
                </div> 
            </div>                                         
                        
            <div class="control-group"> 
                <label class="control-label" for="LOCATION_NAME">Название Станции</label>
                <div class="controls row-fluid">
                    <input type="text" class="input-large" name="LOCATION_NAME" value="" placeholder="" />
                </div> 
            </div>   

            <div class="control-group"> 
                <label class="control-label" for="COUNTRY">Страна</label>
                <div class="controls row-fluid">
                    <input type="text" class="input-large" name="COUNTRY" value="" placeholder="" />
                </div> 
            </div>  

            <div class="control-group"> 
                <label class="control-label" for="CITY">Город</label>
                <div class="controls row-fluid">
                    <input type="text" class="input-large" name="CITY" value="" placeholder="" />
                </div> 
            </div>   
                
            <div class="control-group"> 
                <label class="control-label" for="STREET">Улица</label>
                <div class="controls row-fluid">
                    <input type="text" class="input-large" name="STREET" value="" placeholder="" />
                </div> 
            </div>   
             
             <div class="control-group"> 
                <label class="control-label" for="BUILDING_NUMBER">№ дома</label>
                <div class="controls row-fluid">
                    <input type="text" class="input-large" name="BUILDING_NUMBER" value="" placeholder="" />
                </div> 
            </div>                    
                        
            <div class="control-group"> 
                <label class="control-label" for="IS_ALL">Показать все</label>
                <div class="controls row-fluid">
                    <input type="checkbox" name="IS_ALL" />
                </div> 
                
            </div>  

        </form>
    </div>
        <div id="data-table"></div>
    </div>

    <div class="block" id="location-page">
        <div class="form-actions">
            <a href="javascript:void(0);" class="btn" data-action="back">
                <i class="icon-circle-arrow-left"></i> Назад</a>    
            <div class="pull-right">
                <a href="javascript:void(0);" class="btn btn-danger" data-action="delLocation">
                    Удалить</a>
                <a href="javascript:void(0);" class="btn btn-primary" data-action="saveLocation">
                    Сохранить</a>
            </div>            
        </div>
        <div id="data-item"></div>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        var view_StartPage = Backbone.View.extend({
            el: $("#start-page"),

            render: function () {
                this.refreshLocationTable();
            },

            events: {
                "click .btn[data-action='refreshLocationTable']": "refreshLocationTable",
                "click .btn[data-action='toggleSearchBlock']": "toggleSearchBlock",               
                "click table tbody tr": "goToLocationPage"
            },

            goToLocationPage: function (event) {

                if ($(event.target).attr("data-type") == "noclick")
                    return;

                var id = $(event.currentTarget).attr("data-index");
                controller.navigate("!/location/" + id, true);
            },

            toggleSearchBlock: function () {
                $("#LocationSearchBlock").toggle();
            },                        

            refreshLocationTable: function (el) {
                var local_el = this.el;
                $("#error-page").hide();

                $.get("/location/locations/",
                    $("form[name='LOCATION-FILTER']").serialize(),
                    function (data) {
                        $("#data-table").html(data);
                        $(local_el).show();
                        $(".tablesorter").tablesorter();
                    }).error(function (data) {
                        var response = $.parseJSON(data.responseText);
                        $("#error-page").html(response.message);
                        $("#error-page").show();
                    });
            }   
        });

        var view_LocationPage = Backbone.View.extend({
            el: $("#location-page"),
            index: undefined,

            render: function (id) {
                this.index = id,
                this.loadLocation(id);
            },

            events: {
                "click .btn[data-action='back']": "back",               
                "click .btn[data-action='saveLocation']": "saveLocation",
                "click .btn[data-action='delLocation']": "delLocation"
            },

            back: function () {
                window.history.back();
            },
            loadLocation: function (id) {
                var local_el = this.el;

                $.get('/location/location/' + id, function (data) {
                    $("#data-item").html(data);
                    $(local_el).show();                   
                });
            },

            saveLocation: function () {
                $.ajax({
                    type: 'POST',
                    url: '/location/save/',
                    data: $("form[name='WH_LOCATIONS']").serialize(),
                    success: function () {
                        window.history.back();
                    },
                    error: function (data) {
                        var error = jQuery.parseJSON(data.responseText);
                        var errorMessage = error.message;
                        $("#alertMessage").text(errorMessage);
                        $("#alert").show();
                    }
                });
            },
          
            delLocation: function () {
                $.ajax({
                    type: 'POST',
                    url: '/location/delete/',
                    data:
                       {
                           GUID_RECORD: $("form[name='WH_LOCATIONS'] input[name='GUID_RECORD']").val()
                       },
                    success: function () {
                        window.history.back();
                    },
                    error: function (data) {
                        var error = jQuery.parseJSON(data.responseText);
                        var errorMessage = error.message;
                        $("#alertMessage").text(errorMessage);
                        $("#alert").show();
                    }
                });
            }
        });

        var Views = {
            startPage: new view_StartPage(),
            locationPage: new view_LocationPage()
        };

        var Controller = Backbone.Router.extend({
            routes: {
                "": "start", // Пустой hash-тэг
                "!/": "start", // Начальная страница   
                "!/location/:id": "showLocation"
            },
            initialize: function (options) {
            },
            start: function () {
                $(".block").hide();

                if (Views.startPage != null) {
                    Views.startPage.render();
                }
            },
            showLocation: function (id) {
                $(".block").hide();

                if (Views.locationPage != null) {
                    Views.locationPage.render(id);
                }
            }
        });
        var controller = new Controller(); // Создаём контроллер
        Backbone.history.start();  // Запускаем HTML5 History push 
    })
</script>